<!--
 * @Author: luo jp luojp@novots.com
 * @Date: 2022-10-10 19:10:12
 * @LastEditors: luo jp luojp@novots.com
 * @LastEditTime: 2022-10-11 19:44:36
 * @FilePath: \hdl-manage-new\src\components\Common\Tabs.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 标签页 -->
<template>
  <div class="tabs" v-if="editableTabs && editableTabs.length > 0">
    <el-tabs v-model="curPath" type="card" tab-position="bottom" closable @tab-remove="removeTab" @tab-click="clickTab">
      <el-tab-pane v-for="(item, index) in editableTabs" :key="item.path" :label="item.title" :name="item.path">
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>

export default {
  data() {
    return {
      menuList: this.$store.state.menuList || [], //菜单
      curRouterInfo: {}, //当前路由信息
      editableTabs: [],
      maxTabs:5, //最多展示tabs的个数
    }
  },
  computed: {
    curPath: {
      get() {
        return this.$route.path;
      },
      set(val) {
        return val;
      }
    }
  },
  mounted() {
    this.menuList = this.$store.state.menuList || [], //菜单
    this.getCurRouterInfo();
  },
  // popstate 监听浏览器物理后退键
  created() { //创建vm实例后执行
    //浏览器控制按钮前进后退触发函数
    window.addEventListener('popstate', this.popstate, false);
  },
  destroyed() { //销毁vm组件
    //避免堆栈溢出，多次创建，多次触发
    window.removeEventListener('popstate', this.popstate, false);
  },
  methods: {
    popstate() {
      //做处理
      this.getCurRouterInfo(this.$route.path);
    },
    //获取树节点
    getTreeItem(list, path) {
      let value = null;
      for (let index = 0; index < list.length; index += 1) {
        if (list[index].path === (path || (this.$route && this.$route.path))) {
          value = list[index]
          break;
        }
        if (list[index].children instanceof Array && list[index].children.length > 0) {
          const text = this.getTreeItem(list[index].children, path);
          if (text)
            return text;
        }
      }
      return value;
    },
    //寻找当前路由路径对应路由信息
    getCurRouterInfo(targetName) {
      this.curRouterInfo = this.getTreeItem(this.menuList, targetName);
      const index = this.editableTabs.findIndex(item => item.path === targetName);
      if (index === -1) {
        if (this.editableTabs.length > this.maxTabs) this.editableTabs.shift();
        this.editableTabs = [...this.editableTabs, this.curRouterInfo];
        this.$router.push({
          path: targetName
        })
      }
    },
    // 添加标签tab
    addTab(targetName) {
      this.getCurRouterInfo(targetName);
    },
    //删除标签tab
    removeTab(targetName) {
      console.log('targetName:', targetName);
      if (this.curPath === targetName) {
        this.editableTabs.forEach((tab, index) => {
          if (tab.path === targetName) {
            let nextTab = this.editableTabs[index + 1] || this.editableTabs[index - 1];
            if (nextTab) {
              this.$router.push({
                path: nextTab.path
              });
            }
          }
        })
      }
      this.editableTabs = this.editableTabs.filter(tab => tab.path !== targetName);
    },
    //选中标签tab
    clickTab(tab) {
      this.$router.push({
        path: tab._props.name
      })
    },
    setTags(route) {
      console.log('route:', route);
    }
  }
}
</script>
<style lang="scss" scoped>
.tabs {}
</style>